@import "../../../assets/css/mixin.scss";

.player-cd {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    &.pause {
        .needle {
            transform: translate3d(-35px,0,0) rotate(-30deg);
        }
        .disc-box {
            animation-play-state : paused;
        }
    }
    .needle {
        position: absolute;
        top: -50px;
        left: 50%;
        z-index: 9;
        width: 276px;
        height: 414px;
        @include bg-url("../../../assets/img/player/needle.png");
        @include bg-full;
        transform: translate3d(-35px,0,0);
        transform-origin: 48px 48px;
        transition: all .3s;
    }
    .disc-box {
        position: absolute;
        top: 190px;
        left: 50%;
        width: 804px;
        height: 804px;
        margin-left: -402px;
        animation: circle-rotate 12s linear infinite;
        .disc {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(255,255,255,.1);
            @include bg-url("../../../assets/img/player/disc.png");
            @include bg-full;
        }
        img {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 530px;
            height: 530px;
            transform: translate(-50%,-50%);
        }
    }
}

@keyframes circle-rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
